<script lang="ts" setup name="MemberInfo">
import { CirclePlus, Delete, EditPen } from '@element-plus/icons-vue'
import { cloneDeep } from 'lodash-es'
import { ProTableInstance } from '~/library/components/ProTable/interface'
import { Member } from '~/src/api/interface/member'
import { createMemberInfoAPI, deleteMemberInfoAPI, editMemberInfoAPI, getMemberInfoAPI, rechargeAPI } from '~/src/api/member'
import MemberInfoDialog from '../components/MemberInfoDialog.vue'
import RechargeDialog from '../components/RechargeDialog.vue'
import { memberInfoColumns } from './info/columns'

const initData = reactive<Partial<Member.MemberInfo>>({
  grade: 0,
  sex: 1,
  passWord: '',
  status: 1,
})
const tableRef = ref<ProTableInstance>()

const memberInfoDialogRef = ref<InstanceType<typeof MemberInfoDialog>>()
const goDetail = (title: string, row: Partial<Member.MemberInfo>) => {
  memberInfoDialogRef.value?.acceptParams({
    title,
    data: cloneDeep(row),
    api: row.id ? editMemberInfoAPI : createMemberInfoAPI,
    getTableList: tableRef.value?.getTableList,
  })
}

const onDeleteRow = () => {
  useDeleteData(deleteMemberInfoAPI, tableRef.value as ProTableInstance)
}
const rechargeDialogRef = ref<InstanceType<typeof RechargeDialog>>()
const openRechargeDialog = (row: Member.MemberInfo) => {
  rechargeDialogRef.value?.acceptParams({
    data: {
      id: row.id,
      currentBalance: row.balance,
      nickName: row.nickName,
      memo: '',
      giftAmount: 0,
      balance: 0,
    },
    api: rechargeAPI,
    title: '',
    getTableList: tableRef.value?.getTableList,
  })
}
</script>

<template>
  <div class="auto-height-container auto-height-container main-box">
    <pro-table
      ref="tableRef"
      :columns="memberInfoColumns"
      :indent="20"
      :isCard="false"
      :request-api="getMemberInfoAPI"
      row-key="id"
      title="会员等级列表"
    >
      <template #tableHeader>
        <el-button :icon="CirclePlus" type="primary" @click="goDetail('新增', initData)">新增会员</el-button>
        <!-- <el-button :icon="Delete">删除</el-button> -->
        <el-button v-auth="'delete'" :icon="Delete" @click="onDeleteRow">删除</el-button>
      </template>
      <template #date="{ row }">
        {{ row.date ? row.date.slice(0, 11) : '' }}
      </template>
      <template #nickName="{ row }">
        <el-button :icon="EditPen" link type="primary" @click.stop="goDetail('编辑', row)">{{ row.nickName }}</el-button>
      </template>

      <template #balance="scope">
        <div class="flx-justify-between">
          <el-text>{{ scope.row.balance }}</el-text>
          <el-button v-auth="'recharge'" link type="primary" @click="openRechargeDialog(scope.row)">充值</el-button>
        </div>
      </template>
    </pro-table>
    <member-info-dialog ref="memberInfoDialogRef" />
    <recharge-dialog ref="rechargeDialogRef" />
  </div>
</template>

<style lang="scss" scoped></style>
